<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工列表练习</title>
</head>
<body>
<input type="text" class="i1" placeholder="请输入员工姓名">
<input type="text" class="i2" placeholder="请输入员工工资">
<input type="text" class="i3" placeholder="请输入员工岗位">
<button onclick="add()">添加员工</button>
<hr>

<table border="2px">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
</table>
<script>
    let employees = [];
    function add() {
        let name = document.querySelector('.i1').value;
        let salary = document.querySelector('.i2').value;
        let job = document.querySelector('.i3').value;

        // 创建新的表格行
        let trE = document.createElement('tr');

        // 创建三个单元格并设置内容
        let tdName = document.createElement('td');
        tdName.append(name);

        let tdSalary = document.createElement('td');
        tdSalary.append(salary);

        let tdJob = document.createElement('td');
        tdJob.append(job);

        // 将单元格添加到行中
        trE.append(tdName, tdJob,tdSalary);

        // 获取表格并添加新行
        let table = document.querySelector('table');
        table.append(trE);

        document.querySelector('.i1',).value = '';
        document.querySelector('.i2',).value = '';
        document.querySelector('.i3',).value = '';
        employees.push({tdName:name, tdSalary:salary, tdJob:job});
        console.log(employees);
    }
</script>
</body>
</html>